﻿@using Zeus.Extension.Web;
@using Zeus.Biz.Northwind.Model;

@{
    PagedList<Employee> empPageList = ViewBag.Employees;
}

<link rel="stylesheet" type="text/css" href="/CSS/Page.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="/CSS/hacker.css?201209031500" />
<script src="/JS/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/JS/jquery.pagination.js"></script>
<link href="/CSS/pagination.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

    $(function () {
        alert(@empPageList.TotalCount);
        $("#divEmployeeInfo").pagination(
            Number(@empPageList.TotalCount), {
            callback: pageSelectCallback,
            prev_text: 'Previous',
            next_text: 'Next',
            items_per_page: 10,
            num_display_entries: 5,
            num_edge_entries: 2,
            current_page: empIndex
        });
    });

    //call back function
    function pageSelectCallback(page_id) {
        jQuery.ajaxSetup({ cache: false });
        empIndex = page_id;

        //alert(page_id);

        page_id = page_id + 1;
        var param = {
            'pageIndex': page_id,
            'pageSize': 10
        }

        $.post("/Employee/ShowPage/", param, function (data) {
            alert(data);
            $("#divEmployeeInfo").html(data);
        });
    }
</script>

<div id="divEmployeeInfo" class="digg">
    
</div>

<table>
    <thead>
        <th style="width:20%">
            ID
        </th>
        <th style="width:40%">
            Last Name
        </th>
        <th style="width:40%">
            First Name
        </th>
    </thead>
@foreach (var employee in ViewBag.Employees) {
    <tr>
        <td style="width:20%">
            @employee.EmployeeID
        </td>
        <td style="width:40%">
            @employee.LastName
        </td>
        <td style="width:40%">
            @employee.FirstName
        </td>
    </tr>  
}
</table>
